<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Cropper</title>
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/header.css" rel="stylesheet" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/cropper.css">
		<link rel="stylesheet" href="css/main.css">
		
		<style>			
			#container {
				width: 100%;
				position: absolute;
				top: 44px;
				bottom: 0px;
				background: #000000;
			}
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<div id="cutter" class="mui-pull-right" style="font-size: 15px;color: white;line-height: 40px;">
				<img src="../../images/upload.png" width="20px"/>
			</div>
			<h1 class="mui-title title-color"><b id="chatting-nickname">个人头像</b></h1>
		</header>

		<!-- Content -->
		<div id="container">
			<div class="img-container">
				<img id="image" src="" style="background-color: #000000;">
			</div>
		</div>

		<!-- Scripts -->
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
		<script src="https://fengyuanchen.github.io/js/common.js"></script>
		<script src="js/cropper.js"></script>
		<script src="../../js/app.js"></script>

		<script type="text/javascript">
			mui.init();
			var $image = $('#image');
			mui.plusReady(function() {
				var user = app.getUserGlobalInfo();
				var faceImage = user.faceImageBig;
				var imgURL = "";
				// 获取屏幕宽度，设置图片
				var imgSrc = faceImage? app.imgServerUrl + faceImage: "../image/avatar.png"
				$image.attr('src', imgSrc);
				/** ======================== 从相册选择图片 ======================== **/
				// 从相册中选择图片
				console.log("从相册中选择图片:");
				plus.gallery.pick( function(path){
					plus.io.resolveLocalFileSystemURL(path, function(entry){
						entry.file(function(file){
							var reader = new plus.io.FileReader();
							reader.readAsDataURL(file)
							reader.onloadend = function(evt){
								$image.attr('src', evt.target.result)
								imgURL = evt.target.result
							}
						})
					})
				}, function ( e ) {
					mui.openWindow("myface-uploader.html", "myface-uploader.html");
				}, {filter:"image"} );
				
				/** ======================== 图片裁剪 ======================== **/
				var cutter = document.getElementById("cutter");
				cutter.addEventListener('tap', function(){
					plus.nativeUI.showWaiting( "上传中..." );
					// 上传头像
					var user = app.getUserGlobalInfo();
					// 与后端联调
					mui.ajax(app.serverUrl + "/user/uploadFaceBase64",{
						data:{
							userId:user.id,
							faceData:imgURL
						},
						type:'post',//HTTP请求类型
						// timeout:10000,//超时时间设置为10秒
						headers: {'Content-Type':'application/json'},	              
						success:function(data){
							// 关闭等待框
							console.log(333)
							console.log(JSON.stringify(data))
							plus.nativeUI.closeWaiting();
							if (data.status == 200) {
								app.showToast("上传成功", "success")
								var userInfo = data.data;
								app.setUserGlobalInfo(userInfo);
								
								// 触发另外一个webview的自定义事件，可以使用 mui.fire()
								var wdzl_meWebview = plus.webview.getWebviewById("bird-me.html");
								mui.fire(wdzl_meWebview, "refresh");
								
								// 触发另外一个webview的自定义事件，可以使用 mui.fire()
								var myfaceWebview = plus.webview.getWebviewById("myface.html");
								mui.fire(myfaceWebview, "refresh");
								
								// 页面跳转
								mui.openWindow("../../pages/index.html", "index");
							} else {
								app.showToast(data.msg, "error");
							}
						},
						error: function(err){
							console.log(222)
							plus.nativeUI.closeWaiting();
							console.log(JSON.stringify(err))
						}
					});
				})
			});
		</script>

	</body>

</html>